<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> 
<title>XHY</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Open+Sans:400,700|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>


<style>

* {
            padding: 0;
            margin: 0;
        }

        body, #canvas {
            width: 100vw;
            height: 100vh;
            
        }

body {
	font-family:helvetica, arial, sans-serif;
	background-image: url(imges/简约背景.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	}
	p{
		text-indent: 2em;
	}
#wrapper {
	min-width:95%;
	max-width:1100px;
	margin:0 auto;
	overflow:hidden;
	}
header {
	background:rgba(120, 241, 64, 0.226);
	border-radius: 10px;
	margin-bottom: 2%;
	margin-top: 0.5%;
	}
header h1 {
	font-family:'Droid Sans';
	font-weight:400;
	font-size:4em;
	letter-spacing:-.05em;
	color:#fff;
	padding:0 0 5px 10px; 
	text-align: center;
	}
nav {
	display:table-cell;
	width:200px;
	background:#dcd9c04f;
	padding:10px;
	border-radius: 15px;
	}
nav li {
	list-style-type:none;
	line-height: 1.5em;
	margin-top: 1em;
	}
nav a {
	font-family:'Open Sans Condensed';
	font-weight:700;
	font-size:.85em;
	color:#616161;
	text-decoration: none;

	}
nav li :hover{
	color: #ffed53;
}
article {
	display:table-cell;
	background:#ffee5352;
	padding:10px 20px;
	border-radius: 15px;
	margin-left: 4%;
	}
	/* 主题文章样式 */
article h1 {
	font-family:'Droid Sans';
	font-weight:700;
	font-size:1.5em;
	letter-spacing:-.05em;
	color:#616161;
	}
article h2 {
	font-family:'Droid Sans';
	font-weight:700;
	font-size:1.25em;
	letter-spacing:-.05em;
	color:#616161;
	text-decoration:overline;
	margin:10px 0 0 0;
	}
article p {
	font-family:'Open Sans Condensed';
	font-weight:300;
	font-size:1em;
	color:#000;
	}
aside {
	display:table-cell;
	width:210px;
	background:#3f7bcf3a;
	padding:10px;
	border-radius: 15px;
	}
aside h3 {
	font-family:'Open Sans Condensed';
	font-weight:700;
	letter-spacing:-.075em;
	color:#ffed53;
	}
aside p {
	font-family:'Open Sans Condensed';
	font-weight:700;
	font-size:.85em;
	line-height:1.2em;
	color:#fff;
	}
footer {
	clear:both;
	text-align:center;
	margin-top: 0.5%;
	}
footer p {
	font-family:'Open Sans';
	font-weight:700;
	font-size:.65em;
	color:rgb(24, 23, 23);
	}
footer a {
	font-family:'Open Sans';
	font-weight:700italic;
	font-size:1em;
	color:#ffed53;
	text-decoration:none;
	}
	img{
		position: fixed ;
	    left: -0px;
		bottom: -0px;
		


		

	}
</style>
</head>

<body >

	<canvas id="canvas" style="z-index: -1;position: fixed;"></canvas>

    <script>
        // 屏幕宽高
        const windowW = document.body.offsetWidth
        const windowH = document.body.offsetHeight

        const canvasDom = document.getElementById('canvas')
        canvasDom.width = windowW
        canvasDom.height = windowH
        const ctx = canvasDom.getContext('2d')

        // 花瓣 - 数组
        const petalsArr = []

        
        // 生成范围随机数
        const random = (start, end) => {
            return Math.random() * (end - start) + start
        }

        // 添加 花瓣
        const addPetals = () => {
            const width = random(36.5, 5.3)

            petalsArr.push(new Petals({
                width: width,
                height: 186 * width / 365,
                imgSrc: 'imges/petals.png',

                speedX: random(0.1, 1),
                speedY: random(0.5, 0.5),
                // 上下花瓣飘落速度
                x: random(0, windowW),
                y: 0
            }))
        }
        

        // render 
        function render() {
            // 清除页面
            ctx.clearRect(0, 0, windowW, windowH)

            // 填充背景色
            ctx.fillStyle="rgba(255,255,255,0)";
            ctx.fillRect(0, 0, windowW, windowH);

            petalsArr.forEach((petal, index) => {
                if(petal.y > windowH) {
                    petalsArr.splice(index, 1)
                } else {
                    petal.draw(index)
                }
            })
            requestAnimationFrame(render)
        }


        // 花瓣 - 类
        class Petals {
            constructor(petal) {
                // ---- 花瓣数据 ----
                // 宽度
                this.width = petal.width
                // 高度
                this.height = petal.height
                // 图片
                this.img = new Image()
                this.img.src =  petal.imgSrc

                // ---- 动画配置 ----
                // 横向运动速度
                this.speedX = petal.speedX
                // 下落速度
                this.speedY = petal.speedY
                // x轴距离
                this.x = petal.x
                // y轴j距离
                this.y = petal.y

                // 是否可切换左右切换方式
                this.canSwitch = true
                // 左右移动方向 true - 右， false - 左
                this.switch = true
                // 单方向执行次数 
                this.switchNum = 0
            }

            // 花瓣运动
            draw() {
                if(this.switchNum > 100) this.canSwitch = true
                if(this.canSwitch) {
                    this.canSwitch = false
                    this.switchNum = 0
                    this.switch = Math.random() > 0.5
                }
                if(this.switch) {
                    this.x += this.speedX
                } else {
                    this.x -= this.speedX
                }
                this.y += this.speedY
                this.switchNum ++ 
                ctx.drawImage(this.img, this.x, this.y, this.width, this.height)
            }
        }


        
        // 调用函数
        addPetals()
        setInterval(addPetals, 800)
        // 数值越大花瓣越少
        render()
        

    </script>

	<div id="wrapper">
    	<header>
    		<h1>这是我的网站</h1>
    	</header>
        <div class="col_wrap">
        	<nav>
                <ul>
                    <li><a href="#">第一个链接</a></li>
                    <li><a href="#">第一个链接</a></li>
                    <li><a href="#">第一个链接</a></li>
                </ul>
        	</nav>
       <article>
       	<h1>第一个内容</h1>
            <p>网页设计中很多时候都要处理文本，包括段落、标题、列表、菜单和表单中的文本。
				因此，理解本章要讲的字体和文本属性，对于创造出专业水准的网页排版非常重要。
				一个网站的品质如何，有时候只要看看它用的字体就能一目了然。如果说图片只是
				蛋糕上的糖衣，那么排版才是卓越设计的根本。
				这一章主要介绍字体和文本，以及与它们相关的 CSS 属性。CSS3 最新的 Web 字体
				当然不能少，我们会看一看怎么让字体可以随网页下载到用户的浏览器。这样就不
				必苦巴巴地企盼用户机器上有某种字体了，你完全可以自信地让全世界用户都看到
				预期的排版效果。</p>
            <h2>第二的内容</h2>
            <p>字体是“文字的不同体式”或者“字的形体结构”。对于英文而言，每种字体都是由一组具
				有独特样式的字母、数字和符号组成的。根据外观，字体可以分为不同的类别（font 
				collection），包括衬线字体（serif）、无衬线字体（sans-serif）和等宽字体（monospace）。
				每一类字体可以分成不同的字体族（font family），比如 Times 和 Helvetica。而字体族中
				又可以包含不同的字型（font face），反映了相应字体族基本设计的不同变化，例如 Times 
				Roman、Times Bold、Helvetica Condensed 和 Bodoni italic。
				文本就是一组字或字符，比如章标题、段落正文等等，跟使用什么字体无关。 
				CSS 为字体和文本分别定义了属性。字体属性主要描述一类字体的大小和外观。比如，使用
				什么字体族（是 Times，还是 Helvitica），多大字号，粗体还是斜体。文本属性描述对文本的
				处理方式。比如，行高或者字符间距多大，有没有下划线和缩进。 
				这就是我对字体和文本之间区别的认识。如果你想让文字加粗，或者变斜体，可以设定字体属
				性。而行高和缩进这种只有对文本块（比如标题和段落）才有意义的样式，则要使用文本属性
				设定。</p>
            <h2>第三个内容</h2>
			<p>流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应
				大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，
				文本行的长度和页面元素之间的位置关系都可能变化。Amazon.com 的页面采用的
				就是流动中栏布局，在各栏宽度加大时通过为内容元素周围添加空白来保持内容
				居中，而且现在的导航条会在布局变窄到某个宽度时收缩进一个下拉菜单中，从
				而为内容腾出空间。
				今天，越来越多的浏览器都支持 CSS 媒体查询了。这就让基于浏览器窗口宽度提
				供不同的 CSS 样式成为可能。在这种形势下，适应各种屏幕宽度的可变固定布局，
				正逐步取代流动布局。这种可变的固定布局能够适应最大和最小的屏幕，业界称
				之为响应式设计。本书第 8 章将专门介绍响应式设计相关的 CSS 技术。
				 弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容
				元素的大小也会变化，让人产生一种所有东西都变大了的感觉。到目前为止，我
				还没见过设计得非常好的弹性布局，主要是因为它太过复杂了。本章不介绍这种
				布局，而只把笔墨花在固定宽度布局和流动布局上</p>
		</article>
        <aside>
            <h3>右边</h3>
            <p>就这个例子来说，行高就是字体大小 1.2em 的 1.4 倍。注意这里不用给 line-height
				值指定单位，只要一个数值就可以。此时，浏览器会用计算得到的 1.2em 的像素数
				乘以 1.4，结果就是行高。如果后来你把字体大小增大到 1.5em，则行高仍然是 1.5em
				计算值的 1.4 倍。在设定行高时如果使用了绝对单位（如像素），那将来增大字体有
				可能导致行与行之间重叠</p>
        </aside>
		
        </div>
		
       	<footer>
            <p>版权信息等等</p>
        </footer>
    <img src="imges/sikadi2.gif" alt="">


	
</body>
</html>
